---
title: "Bar Chart"
description: Bar charts are commonly used to compare categorical data by representing each category with bars of varying lengths.
order: 3
published: true
references: ["https://recharts.org/en-US/api/BarChart"]
---

## Basic

Bar charts help visualize data comparisons across categories. They are effective for highlighting differences and trends using vertical or horizontal bars.

<How className="w-full max-w-xl" toUse="visualizations/bar-chart/bar-chart-demo" />

## Installation

```bash
npx shadcn@latest add @intentui/bar-chart
```

## Composed components
<Composed components={['chart']}/>

## Manual installation
```bash
npm i recharts
```

<SourceCode toShow={'bar-chart'} />

## Stacked

Stacked bar charts let you compare parts of a whole across categories. Each bar stacks its values to show how they build up.

<How className="w-full max-w-xl" toUse="visualizations/bar-chart/bar-chart-stacked-demo" />


## Custom format

Custom format bar charts let you style the appearance, including bar radius, spacing, and color, for visual alignment with your product.

<How className="w-full max-w-xl" toUse="visualizations/bar-chart/bar-chart-custom-format-demo" />

## Custom tooltip

Custom tooltips let you enrich the bar hover experience with icons, values, and additional context. Ideal for readable data at a glance.

<How className="w-full max-w-xl" toUse="visualizations/bar-chart/bar-chart-custom-tooltip-demo" />

## Custom legend

Custom legends help identify bar categories with icons, colors, or labels tailored to your dataset.

<How className="w-full max-w-xl" toUse="visualizations/bar-chart/bar-chart-custom-legend-demo" />

## Custom colors
Custom colors allow you to set specific colors for each bar, enhancing visual distinction and brand alignment.
<How className="w-full max-w-xl" toUse="visualizations/bar-chart/bar-chart-custom-colors-demo" />

## Controlled

Controlled bar charts let you dynamically manage state. You can filter datasets, toggle views, or update the display based on user interaction.

<How className="w-full max-w-xl" toUse="visualizations/bar-chart/bar-chart-controlled-demo" />
